<template>
  <div class="page-container-padding" v-loading="pageDataLoading">
    <!-- 查询条件 -->
    <div style="display: flex; align-items: center">
      <span>
        <el-date-picker
          style="width: 220px"
          v-model="dateRange"
          type="daterange"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :clearable="false"
        ></el-date-picker>
      </span>
      <span style="margin-left: 6px">
        <el-select style="width: 130px" v-model="statisticsType" size="mini">
          <el-option :value="0" label="默认统计方式"></el-option>
          <el-option :value="1" label="小组统计方式"></el-option>
        </el-select>
      </span>
      <span style="margin-left: 6px">
        <el-button type="primary" size="mini" @click="dateRangeQuery">
          统计
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="success" size="mini" @click="currentMonthQuery">
          计本月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preMonthQuery">
          上一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextMonthQuery">
          下一月
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="yearQuery">全年</el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="preYearQuery">
          上一年
        </el-button>
      </span>
      <span style="margin-left: 6px">
        <el-button type="infor" size="mini" @click="nextYearQuery">
          下一年
        </el-button>
      </span>
    </div>
    <!-- 显示统计结果 -->
    <div style="margin-top: 10px">
      <div>值班信息统计表</div>
      <el-table border stripe :data="statisticsList" empty-text="暂无统计数据">
        <el-table-column
          prop="admin_name"
          label="姓名"
          width="90px"
          align="center"
        >
          <template slot-scope="scope">
            <span style="cursor: pointer" @click="userCacheChange(scope.row)">
              {{ scope.row.admin_name }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="total_count"
          label="数量"
          width="100px"
          align="right"
        />
        <el-table-column
          prop="on_date_count"
          label="值班天数"
          align="right"
          width="100px"
        />
        <el-table-column
          prop="date_avg_count"
          label="日均数"
          align="right"
          width="100px"
        />
        <el-table-column
          prop="percent"
          label="占比"
          width="100px"
          align="right"
        />
        <el-table-column
          prop="audit_count"
          label="标记数"
          width="100px"
          align="right"
        />
      </el-table>
    </div>
    <div style="color: #f34d37; font-size: 12px; margin-top: 2px">
      注：点击表中的用户名，可查看该人员的详细记录。
    </div>

    <!-- 显示详情表 -->
    <div style="margin-top: 10px">
      <div v-if="recordsShowList.length > 0">
        <div
          v-for="(msgItem, index) in recordsShowList"
          :key="index"
          class="msg-box"
        >
          <div class="msg-title">
            <span>{{ msgItem.create_date }}</span>
            <span class="msg-action">
              <i class="el-icon-delete-solid" @click="toDeleteMessage(msgItem)">
                删除
              </i>
            </span>
          </div>
          <div class="msg-content">{{ msgItem.content }}</div>
          <div>
            <span class="msg-author">{{ msgItem.admin_name }}</span>
            <span v-if="msgItem.editor">
              标记：
              <el-select
                v-model="msgItem.audit_mind"
                style="margin-left: 6px; width: 120px"
                size="mini"
              >
                <el-option value="A00" label="正常"></el-option>
                <el-option value="A01" label="编写有误"></el-option>
                <el-option value="A02" label="敏感词汇"></el-option>
                <el-option value="A03" label="遭遇投诉"></el-option>
                <el-option value="A04" label="其他问题"></el-option>
              </el-select>
              <span style="margin-left: 4px">
                <el-button
                  type="primary"
                  size="mini"
                  @click="toSaveAuditMind(msgItem)"
                >
                  保存
                </el-button>
              </span>
              <span style="margin-left: 4px">
                <el-button
                  type="infor"
                  size="mini"
                  @click="msgItem.editor = false"
                >
                  取消
                </el-button>
              </span>
            </span>
            <span v-else>
              <span class="msg-audit" @click="msgItem.editor = true">
                {{ msgItem.audit_mind_zh }}
              </span>
            </span>
          </div>
        </div>
        <el-pagination
          style="margin-top: 5px"
          background
          layout="total, prev, pager, next, jumper"
          :current-page.sync="page"
          :page-size="pageSize"
          :total="totalCount"
          @current-change="currentPageChange"
        ></el-pagination>
      </div>
      <div v-else>
        <el-empty description="查询条件无详情数据"></el-empty>
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getMonthDatePoint,
    getYearDatePoint,
    datetimeToStr,
  } from '@/utils/datetimeUtils'
  import {
    getOndutyStatistics,
    updateOndutyMessag,
    deleteOndutyMessag,
  } from '@/api/departmentWork/ondutyMessage'
  export default {
    data() {
      return {
        statisticsType: 0,
        pageDataLoading: false,
        dateRange: [],
        statisticsList: [], // 统计表
        recordsCache: [], // 存放统计表内的所有详情数据
        userRecordsCache: [], // 当前点击的人员
        showFlag: 'total', // total or personal

        page: 1,
        pageSize: 30,
        totalCount: 0,
        recordsShowList: [], // 当前显示的数据
        showDocxView: false,
      }
    },
    mounted() {
      this.setCurrentDates()
      this.queryPageData()
    },
    methods: {
      setCurrentDates() {
        let flag = new Date().getDate() < 4 ? 'previous' : 'current'
        this.dateRange = getMonthDatePoint(new Date(), flag)
      },
      toSaveAuditMind(msg) {
        const updateData = {
          sid: msg.id,
          audit_mind: msg.audit_mind,
        }
        updateOndutyMessag(updateData).then((res) => {
          if (res.code === 200) {
            msg.editor = false
            msg.audit_mind_zh = res.data.audit_mind_zh
          }
          this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
        })
      },
      // 查询数据
      queryPageData() {
        const para = {
          start: datetimeToStr(this.dateRange[0], true, ''),
          end: datetimeToStr(this.dateRange[1], true, ''),
          st: this.statisticsType,
        }

        this.pageDataLoading = true
        getOndutyStatistics(para)
          .then((res) => {
            const data = res.data
            this.statisticsList = data.statistics
            this.recordsCache = data.records.map((r) => {
              r.editor = false
              return r
            })

            this.showFlag = 'total'
            this.totalCount = this.recordsCache.length
            this.page = 1
            this.showRecords(1)

            this.pageDataLoading = false
          })
          .catch((err) => {
            this.pageDataLoading = false
          })
      },

      // 点击了统计表中的user
      userCacheChange(row) {
        if (row.user_id == -1) {
          this.userRecordsCache = this.recordsCache
        } else {
          this.userRecordsCache = this.recordsCache.filter((item) => {
            return item.user_id === row.user_id
          })
        }
        this.showFlag = 'personal'
        this.totalCount = this.userRecordsCache.length
        this.page = 1
        this.showRecords(1)
      },

      currentPageChange(page) {
        this.showRecords(page)
      },

      // 显示详情数据
      showRecords(page) {
        const startIndex = (page - 1) * this.pageSize
        if (this.showFlag === 'total') {
          this.recordsShowList = this.recordsCache.slice(
            startIndex,
            startIndex + this.pageSize
          )
        } else if (this.showFlag === 'personal') {
          this.recordsShowList = this.userRecordsCache.slice(
            startIndex,
            startIndex + this.pageSize
          )
        }
      },

      // 删除一个数据
      toDeleteMessage(msg) {
        this.$baseConfirm('删除信息，删除后不可恢复!', '警告', () => {
          deleteOndutyMessag(msg.id).then((res) => {
            if (res.code === 200) {
              this.queryPageData()
            }
            this.$baseMessage(res.msg, res.code === 200 ? 'success' : 'error')
          })
        })
      },

      // 指定日期范围查询
      dateRangeQuery() {
        this.queryPageData()
      },

      // 本月查询
      currentMonthQuery() {
        this.dateRange = getMonthDatePoint(new Date(), 'current') // 当前月份
        this.queryPageData()
      },

      // 上一月查询
      preMonthQuery() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'previous')
        this.queryPageData()
      },

      // 下一月查询
      nextMonthQuery() {
        this.dateRange = getMonthDatePoint(this.dateRange[0], 'next')
        this.queryPageData()
      },

      // 当前月份所在全年查询
      yearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'current')
        this.queryPageData()
      },

      // 上一年查询
      preYearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'previous')
        this.queryPageData()
      },

      // 下一年查询
      nextYearQuery() {
        let year = new Date(this.dateRange[0]).getFullYear()
        this.dateRange = getYearDatePoint(year, 'next')
        this.queryPageData()
      },
    },
  }
</script>

<style scoped lang="scss">
  .show-action {
    opacity: 1;
  }
  .msg-box {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
      .msg-title .msg-action {
        @extend .show-action;
      }
    }
    .msg-title {
      color: #0073fc;
      font-weight: 700;
      font-size: 16px;
      .msg-action {
        float: right;
        color: #ff430d;
        font-size: 13px;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.1s;
      }
    }
    .msg-content {
      line-height: 22px;
      margin-bottom: 6px;
    }
    .msg-author {
      color: #fff;
      background-color: #b3cbf7;
      width: 80px;
      padding: 2px 4px;
      font-size: 12px;
      border-radius: 6px;
      margin-right: 16px;
    }
    .msg-audit {
      margin-left: 20px;
      cursor: pointer;
      border-radius: 8px;
      padding: 2px 4px;
      background-color: #44AAEE;
      color: #fff;
      font-size: 12px;
      &:hover {
        color: #0073FC;
      }
    }
  }
</style>
